<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item :index="item.index" v-for="item in router" :key="item.index" @click="gopush(item)">{{
        item.name
      }}</el-menu-item>
    </el-menu>
    <div class="search">
      <div class="title">
        <i style="font-style: normal">统计</i>
        <el-date-picker
          v-model="value"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          size="small"
          style="margin-left: 10px"
          @change="itemClick"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="month">
        <el-button
          class="edit"
          size="medium"
          v-for="item in month"
          :key="item.value"
          :autofocus="item.autofocus"
          @click="choose(item)"
          >{{ item.month }}</el-button
        >
      </div>
    </div>
    <div class="quantity">
      <div class="number" v-for="item in number" :key="item.key">
        <div class="icon" :style="{ backgroundColor: item.background }">
          <i :class="item.icon" style="font-size: 46px" :style="{ color: item.color }"></i>
        </div>
        <div class="num">
          <p :style="{ color: item.color }">{{ item.num }}</p>
          <strong :style="{ color: item.color }">{{ item.value }}</strong>
        </div>
      </div>
    </div>
    <div class="conten">
      <div class="situation">
        <p style="margin-left: 20px">制定计划与任务完成情况</p>
        <el-table :data="tableData" stripe style="width: 100%" height="379">
          <el-table-column prop="index" label="序号" align="center"> </el-table-column>
          <el-table-column prop="planName" label="计划名称" align="center"> </el-table-column>
          <el-table-column prop="typeName" label="任务名称" align="center" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="startTime" label="开始时间" align="center"> </el-table-column>
          <el-table-column prop="endTime" label="结束时间" align="center"> </el-table-column>
          <el-table-column prop="fullName" label="负责人" align="center"> </el-table-column>
          <el-table-column prop="status" label="进度" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1"><el-tag type="info">未开始</el-tag></div>
              <div v-else-if="scope.row.status == 2"><el-tag type="primary">进行中</el-tag></div>
              <div v-else-if="scope.row.status == 3"><el-tag type="success">已完成</el-tag></div>
              <div v-else-if="scope.row.status == 4"><el-tag type="danger">已超时</el-tag></div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="registration">
        <p>事项登记</p>
        <div id="registration"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import month from '@/mock/month.json'
export default {
  data() {
    return {
      activeIndex: '',
      value: '',
      month: null,
      number: [
        {
          num: 5679,
          value: '制定计划数',
          key: 1,
          icon: 'el-icon-s-management',
          color: '#7980ff',
          background: '#e3e3ff',
        },
        {
          num: 5679,
          value: '制定任务数',
          key: 2,
          icon: 'el-icon-s-order',
          color: '#72dde7',
          background: '#def7f8',
        },
        {
          num: 5679,
          value: '完成计划数',
          key: 3,
          icon: 'el-icon-s-claim',
          color: '#ff9191',
          background: '#fff0f1',
        },
        {
          num: 5679,
          value: '完成任务数',
          key: 4,
          icon: 'el-icon-folder-checked',
          color: '#ffb885',
          background: '#fff5f0',
        },
      ],
      tableData: [],
      router: [],
    }
  },
  methods: {
    handleSelect() {},
    choose(val) {},
    handleClick() {},
    getmatter() {
      var myChart = this.$echarts.init(document.getElementById('registration'))
      var option = {
        tooltip: {
          transitionDuration: 0,
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            radius: ['40%', '70%'],
            type: 'pie',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    getroute() {
      var indexf = 1
      var router = JSON.parse(localStorage.getItem('router'))
      router.forEach(item => {
        if (item.children) {
          item.children.forEach(items => {
            var children = {
              name: items.name,
              path: items.path,
              index: indexf++ + '',
            }
            this.router.push(children)
          })
        }
      })
    },
    itemClick(val) {},
    gopush(val) {
      this.$router.push(val.path)
    },
    getfindAll() {
      var index = 1
      Seats.findAll().then(e => {
        this.tableData = e.data
        this.tableData.forEach(item => {
          item.index = index++
        })
      })
    },
  },
  created() {
    this.month = month
    this.getroute()
    this.getfindAll()
  },
  mounted() {
    this.getmatter()
  },
}
</script>

<style lang="scss" scoped>
@import './indexPage.scss';
</style>
